<template>
  <view>
    <view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
      <view
        class="cu-bar fixed"
        :style="style"
        :class="[bgImage !== '' ? 'none-bg text-white bg-img' : '', bgColor]"
      >
        <view class="action left-action" @tap="BackPage" v-if="isBack">
          <text class="cuIcon-back"></text>
        </view>
        <view class="content" :style="[{ top: StatusBar + 'px' }]">
          <slot name="content"></slot>
        </view>
        <view class="action">
          <slot name="right"></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      StatusBar: this.StatusBar,
      CustomBar: this.CustomBar,
    };
  },
  name: "cu-custom",
  computed: {
    style() {
      var StatusBar = this.StatusBar;
      var CustomBar = this.CustomBar;
      var bgImage = this.bgImage;
      var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
      if (this.bgImage) {
        style = `${style}background-image:url(${bgImage});`;
      }
      return style;
    },
  },
  props: {
    bgColor: {
      type: String,
      default: "",
    },
    isBack: {
      type: [Boolean, String],
      default: false,
    },
    bgImage: {
      type: String,
      default: "",
    },
  },
  methods: {
    BackPage() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.left-action {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  box-shadow: 0 4px 30px 0 rgba(135,98,255,0.16);
  border-radius: 10px;

  .cuIcon-back {
    margin: 0 !important;
    color: #1C1C1C;
    font-size: 12px;
  }
}

.content {
  font-size: 16px;
  color: #000000;
  font-weight: 500;
}
</style>
